<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<spring:url
        value="resources/styles/standard.css"
        var="standard_css"/>
<spring:url value="/spring-mvc-test/checkUser" var="checkUserURL"/>
<spring:url value="/spring-mvc-test/checkPassword" var="checkPasswordURL"/>
<spring:url value="/spring-mvc-test/login?lang=ru" var="russian"/>
<spring:url value="/spring-mvc-test/login?lang=en" var="english"/>
<spring:url value="/spring-mvc-test/home" var="homeURL" />
<spring:url value="/spring-mvc-test/signup" var="createUserURL" />


<spring:message code="label_name" var="labelName"/>
<spring:message code="label_data" var="labelData"/>
<spring:message code="label_email" var="labelEmail"/>
<spring:message code="label_password" var="labelPassword"/>
<spring:message code="label_forgot_password" var="labelForgotPassword"/>
<spring:message code="label_no_account" var="labelNoAccount"/>
<spring:message code="button_authorization" var="buttonAuthorization"/>
<spring:message code="button_remind" var="buttonRemind"/>
<spring:message code="button_create" var="buttonCreate"/>
<spring:message code="error_incorrect_email" var="errorIncorrectEmail"/>
<spring:message code="error_incorrect_password" var="errorIncorrectPassword"/>
<spring:message code="error_irregular_email" var="errorIrregularEmail"/>
<spring:message code="error_irregular_password" var="errorIrregularPassword"/>
<spring:message code="error_empty_email" var="errorEmptyEmail"/>

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css"
          href="http://localhost:8080/resources/styles/standard.css"/>
</head>
<body>
<script language="javascript" type="text/javascript">

    var codeIrregularEmail = "1";
    var codeIrregularPassword = "2";
    var codeOk = "3";

    function checkEmail() {
        var email = document.getElementById("email").value;
        var emailError = document.getElementById("checkEmail");
        var password = document.getElementById("password").value;
        var passwordError = document.getElementById("checkPassword");
        if (email.length == 0) {
            emailError.value = "${errorEmptyEmail}";
        }
        else {
            emailError.value = ""
            var pattern = /.*@.*\..*/;
            var result = pattern.exec(email);
            if (result == null || email > 200)
                emailError.value = "${errorIncorrectEmail}";
            else {
                if (password.length < 3 || password.length > 30)
                    passwordError.value = "${errorIncorrectPassword}";
                else {
                    passwordError.value = "";
                    checkUserOnServer();
                }
            }
        }
    }

    var request = new XMLHttpRequest();

    function checkUserOnServer() {

        var user = new Object();
        user.email = document.getElementById("email").value;
        user.password = document.getElementById("password").value;

        var url = "${checkUserURL}";
        request.open("POST", url, true);
        request.onreadystatechange = updatePage;
        var result = JSON.stringify(user);

        request.send(result);

    }

    function updatePage() {
        if (request.readyState == 4) {
            if (request.status == 200) {
                var emailError = document.getElementById("checkEmail");
                var passwordError = document.getElementById("checkPassword");
                emailError.value = "";
                passwordError.value = "";
                switch (request.responseText){
                    case codeIrregularEmail:
                        emailError.value = "${errorIrregularEmail}";
                        break;
                    case codeIrregularPassword:
                        passwordError.getElementById("checkPassword").value = "${errorIrregularPassword}";
                        break;
                    case codeOk:
                        document.location.href = "${homeURL}"
                        break;
                }

            }
        }
    }


</script>
<div class="container">
    <div class="header">
        <p>

        <h2>${labelName}</h2>
        </p>
        <hr>
    </div>
    <div class="main">
        <p>
            ${labelData}
        </p>

        <p>
            ${labelEmail}* <input type="text" id="email" class="textEl">
            <input type="text" class="error" id="checkEmail" style="border: 1px solid white"
                   readonly="readonly"/>
        </p>

        <p>
            ${labelPassword}* <input type="password" id="password" class="textEl">
            <input type="text" class="error" id="checkPassword" style="border: 1px solid white"
                   readonly="readonly"/>
        </p>
    </div>
    <div class="authorization">
        <p>
        <hr class="smallLine">
        </p>
        <p>
            <button class="btnEl auth" onclick="checkEmail()">${buttonAuthorization}</button>
        </p>
    </div>

</div>
<div class="footer">
    <p>
        ${labelForgotPassword}
        <button class="btnEl">${buttonRemind}</button>
    </p>
    <p>
        ${labelNoAccount}
        <button class="btnEl" onclick="location.href='${createUserURL}'">${buttonCreate}</button>
    </p>
    <a href="${russian}">Русский</a>
    <a href="${english}">English</a>
</div>
</div>
</body>
</html>

